<template>
  <div class="pageTitle" v-if="titleArray.length>0" ref="pageTitle">
    <div class="pageTitlel" ref="pageTitlel">
      <p class="text" v-for="(char, index) in titleArray" :style="{ '--delay': index * 0.1 +0.5+ 's' }">{{
          char
        }}</p>
    </div>
    <div class="pageTitler" style="display:none">
      <div class="dot1 wow fadeInRight"></div>
      <div class="dot2 wow fadeInRight" :data-wow-delay="1*0.5+'s'"></div>
      <div class="dot3 wow fadeInRight" :data-wow-delay="2*0.5+'s'"></div>
    </div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  name: 'titleInfo',
  props: {
    name: {
      type: String,
      default () {
        return ''
      }
    }
  },
  computed: {
    titleArray () {
      return this.name.split('')
    }
  },
  mounted () {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>

.pageTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;

  .pageTitlel {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;
    height: 100%;
    margin-left: 20px;

    .text {
      opacity: 0;
      font-size: 22px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      line-height: 26px;
      letter-spacing: 2px;
      background: linear-gradient(180deg, #F2FCFF 0%, #47C8FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transform: translateY(-1em);
      animation: appear 0.5s forwards;
      animation-delay: var(--delay);
    }
  }

  .pageTitler {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    margin-right: 10px;

    .dot1 {
      width: 2px;
      height: 4px;
      background: #00C2FF;
      opacity: 1;
      margin-bottom: 3px;
    }

    .dot2 {
      width: 2px;
      height: 4px;
      background: #00C2FF;
      opacity: 0.5;
      margin-bottom: 3px;
    }

    .dot3 {
      width: 2px;
      height: 4px;
      background: #00C2FF;
      opacity: 0.2;
    }
  }
}

@keyframes appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
